<template>
  <commonTable
    rowKey="bookId"
    :columns="roomTypeTableState.columns"
    :rules="[]"
    name="book"
    :addon="true"
    :hideEdit="true"
    :create="false"
  >
    <template #addon="{ record }">
      <a-button type="link" @click="handleClick(record)">查看</a-button>
    </template>
  </commonTable>
  <a-modal :title="modalState.title" v-model:visible="modalState.visible">
    <commonTable
      :query="roomBookTableState.query"
      rowKey="roomBookId"
      name="roomBook"
      :hideEdit="true"
      :hideDelete="true"
      :create="false"
      :columns="roomBookTableState.columns"
    ></commonTable>
  </a-modal>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import commonTable from "../../utils/CommonTable";

const modalState = reactive({
  visible: false,
  title: "详细入住日期",
});
const handleClick = (record) => {
  roomBookTableState.query = { bookId: record.bookId };
  modalState.visible = true;
};
const roomBookTableState = reactive({
  columns: [
    {
      title: "序号",
      dataIndex: "roomBookId",
    },
    {
      title: "预定日期",
      dataIndex: "roomBookDate",
    },
  ],
  query: {},
});

const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "序号",
      dataIndex: "bookId",
    },
    {
      title: "预订用户",
      dataIndex: "userId",
    },
    {
      title: "房间号",
      dataIndex: "roomPackage.room.roomNo",
    },
    {
      title: "房间类型",
      dataIndex: "roomPackage.room.roomType.roomTypeName",
    },
    {
      title: "楼层",
      dataIndex: "roomPackage.room.floor.floorName",
    },
    {
      title: "含早",
      dataIndex: "roomPackage.isBreakfast",
      slots: { customRender: "boolean" },
    },
    {
      title: "已入住",
      dataIndex: "isActive",
      slots: { customRender: "boolean" },
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
});
</script>

<style scoped></style>
